<template>
  <div id="app">
    <transition
      name="fade"
      mode="out-in"
    >
      <router-view />
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      socUrl: '127.0.0.1:3034'
    }
  },
  created() {
    this.initWebSocket()
  },
  methods: {
    initWebSocket() {
      const resData = {
        pkId: 1
      }
      // ws是一定要写的，this.socUrl ：是后端的IP
      // "/imserver/" + resData.pkId 是后端给的接口和要传的Id
      const socUrl = 'ws:' + this.socUrl + '/imserver/' + resData.pkId
      this.webSocket = new WebSocket(socUrl)
      this.webSocket.onopen = event => {
        console.log('event', event.data)
      }

      // 建立连接成功，就可以推送消息，通知用户了
      this.webSocket.onmessage = event => {
        console.log(event)
        if (event.str !== '连接成功') {
          const h = this.$createElement
          this.$notify({
            title: '审批任务',
            message: h('i', { style: 'color: teal' }, event.data),
            onClick: () => {
              console.log('点击事件')
              this.messageGoPath()
            }
          })
        } else {
          console.log('无待办审批任务')
        }
      }
      this.webSocket.onclose = event => {
        console.log('关闭连接')
      }
      // this.webSocket.send
      if (typeof WebSocket !== 'function') {
        alert('您的浏览器不支持websocket')
      }
      if (typeof WebSocket !== 'undefined') {
        console.log('您的浏览器支持websocket通信协议')
      }
    },
    messageGoPath() {
      console.log('处理消息信息')
    },
    websockonmessage() {
      console.log('数据接收')
    }
  }
}
</script>

<style>
#app {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url('./assets/bg2.png');
  background-size: 100% 100%;
  /*禁止滚动*/
  /*overflow: hidden;*/
}
</style>
